<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>拖拽</title>
    <script src="jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="javascripts/jquery.gridly.js" type="text/javascript"></script>
    <link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <style type="text/css">
  .gridly {
    position: relative;
    width: 960px;
  }
  .brick.small {
    width: 140px;
    height: 140px;

  }
  .brick.large {
    width: 300px;
    height: 300px;

  }
    .brick .delete {
    display: block;
    color: #FFF;
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    position: absolute;
    text-align: center;
    line-height: 40px;
  }

.button {
  display: block;
  padding: 20px;
  width: 200px;
  color: #FFF;
  background: #888;
  margin: 20px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 4px; }

    .gridly .brick.small {
      width: 140px;
      height: 140px; }
    .gridly .brick.large {
      width: 300px;
      height: 300px; }
    .gridly .brick.dragging {
      opacity: 0.8; }
    .gridly .brick:nth-child(20n - 1) {
      background: #1ABC9C; }
    .gridly .brick:nth-child(20n - 2) {
      background: #16A085; }
    .gridly .brick:nth-child(20n - 3) {
      background: #2ECC71; }
    .gridly .brick:nth-child(20n - 4) {
      background: #27AE60; }
    .gridly .brick:nth-child(20n - 5) {
      background: #3498DB; }
    .gridly .brick:nth-child(20n - 6) {
      background: #2980B9; }
    .gridly .brick:nth-child(20n - 7) {
      background: #9B59B6; }
    .gridly .brick:nth-child(20n - 8) {
      background: #8E44AD; }
    .gridly .brick:nth-child(20n - 9) {
      background: #34495E; }
    .gridly .brick:nth-child(20n - 10) {
      background: #2C3E50; }
    .gridly .brick:nth-child(20n - 11) {
      background: #F1C40F; }
    .gridly .brick:nth-child(20n - 12) {
      background: #F39C12; }
    .gridly .brick:nth-child(20n - 13) {
      background: #E67E22; }
    .gridly .brick:nth-child(20n - 14) {
      background: #D35400; }
    .gridly .brick:nth-child(20n - 15) {
      background: #E74C3C; }
    .gridly .brick:nth-child(20n - 16) {
      background: #C0392B; }
    .gridly .brick:nth-child(20n - 17) {
      background: #ECF0F1; }
    .gridly .brick:nth-child(20n - 18) {
      background: #BDC3C7; }
    .gridly .brick:nth-child(20n - 19) {
      background: #95A5A6; }
    .gridly .brick:nth-child(20n - 20) {
      background: #7F8C8D; }
</style>
<div id="gridly_box">
    <div class="gridly">
      <div class="brick small"><a class="delete" href="#">×</a></div>
      <div class="brick small"><a class="delete" href="#">×</a></div>
      <div class="brick large"><a class="delete" href="#">×</a></div>
      <div class="brick small"><a class="delete" href="#">×</a></div>
      <div class="brick small"><a class="delete" href="#">×</a></div>
      <div class="brick large"><a class="delete" href="#">×</a></div>
    </div>
    <p class="actions">
      <a class="add button" href="#">Add</a>
    </p>
</div>

<script>
(function() {
  $(function() {
    var brick;
    brick = "<div class='brick small'><a class='delete' href='#'>&times;</a></div>";
    $("#gridly_box").on("click touchend", ".gridly .brick", function(event) {
        console.log("click");
      var $this, size;
      event.preventDefault();
      event.stopPropagation();
      $this = $(this);
      $this.toggleClass('small');
      $this.toggleClass('large');
      if ($this.hasClass('small')) {
        size = 140;
      }
      if ($this.hasClass('large')) {
        size = 300;
      }
      $this.data('width', size);
      $this.data('height', size);
      return $('.gridly').gridly('layout');
    });
    $("#gridly_box").on("click", ".delete", function(event) {
      var $this;
      event.preventDefault();
      event.stopPropagation();
      $this = $(this);
      $this.closest('.brick').remove();
      return $('.gridly').gridly('layout');
    });
    $("#gridly_box").on("click", ".add", function(event) {
      event.preventDefault();
      event.stopPropagation();
      $('.gridly').append(brick);
      return $('.gridly').gridly();
    });
    return $('.gridly').gridly();
  });

}).call(this);
</script>
</body>
</html>